import React, { ReactElement, useEffect } from 'react'
import styles from './applyShop.less'
import logo from "../assets/images/logo-250px.png"
import { Form, Input, message, Radio, Button, Upload, Row, Col, } from 'antd';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
import { useDispatch, useSelector, IRouteComponentProps, Link, useHistory, Redirect } from 'umi';
// import storageUtils from '../utils/storageUtils';


interface Props {

}

export default function index(props: IRouteComponentProps): ReactElement {
    const dispatch = useDispatch();
    const history = useHistory()
    const applyResult = useSelector((state: any) => state.shopModel.applyResult);
    const shopNameCode = useSelector((state: any) => state.shopModel.shopNameCode);
    const shopTelCode = useSelector((state: any) => state.shopModel.shopTelCode);
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        let idCardImg = null
        let licenceImg = null
        if (values.idCardUpload[0].response.code) {
            idCardImg = values.idCardUpload[0].response.data[0]
        }
        if (values.licenceUpload[0].response.code) {
            licenceImg = values.idCardUpload[0].response.data[0]
        }
        const shopName = values.shopName
        const tel = values.tel
        const address = values.address
        const idCard = values.idCard
        const managerName = values.managerName
        const licenceNo = values.licenceNo
        const type = values.type
        // const payload = {
        //     idCardImg, licenceImg, shopName, tel, address, idCard, managerName, licenceNo, type
        // }
        // console.log(payload);
        // console.log(applyResult);

        dispatch({
            type: 'shopModel/shopApplyBySaga',
            payload: {
                idCardImg, licenceImg, shopName, tel, address, idCard, managerName, licenceNo, type
            },
        });
        if (!applyResult) {
            message.error('添加失败！')
        } else {
            message.success('添加成功！')
        }

    }
    const idCardprop = {
        name: 'file',
        action: 'http://47.98.128.191:3000/images/uploadImages',
        maxCount: 1,
        // headers: {
        //     authorization: 'authorization-text',
        // },
        onChange(info: any) {
            if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done' && info.file.response.code) {
                message.success(`图片${info.file.name} 上传成功！`)
            } else if (info.file.status === 'done' && info.file.response.code === 0) {
                message.success(`图片${info.file.name} 上传失败！`)
            }
            if (info.file.status === 'error') {
                message.error(`图片${info.file.name} 上传失败！`)
            }

        }
    }
    const licenceProp = {
        name: 'file',
        action: 'http://47.98.128.191:3000/images/uploadImages',
        maxCount: 1,
        // headers: {
        //     authorization: 'authorization-text',
        // },
        onChange(info: any) {
            if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList)
            }
            if (info.file.status === 'done' && info.file.response.code) {
                message.success(`图片${info.file.name} 上传成功！`)
            } else if (info.file.status === 'done' && info.file.response.code === 0) {
                message.error(`图片${info.file.name} 上传失败！`)
            }
            if (info.file.status === 'error') {
                message.error(`图片${info.file.name} 上传失败！`)
            }
        }
    }
    const normFile1 = (e: any) => {
        // console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };
    const normFile = (e: any) => {
        // console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };
    const shopNameLimit =(rule: any, value: string | number, callback: Function) => {
        // console.log(value);
        dispatch({
            type: 'shopModel/shopNameBySaga',
            payload: value
        })
        console.log(shopNameCode);

        if (!shopNameCode) {
            callback('商铺名称已存在！');
        } else if (!value) {
            callback('商铺名称不能为空');
        } else {
            callback();
        }
    }
    const telLimit = (rule: any, value: string | number, callback: Function) => {
        // console.log(value);
        dispatch({
            type: 'shopModel/shopTelBySaga',
            payload: value
        })
        console.log(shopTelCode);

        if (!shopTelCode) {
            callback('手机号已注册！');
        } else if (!value) {
            callback('请输入联系方式！');
        } else {
            callback()
        }
    }
    return (
        <div className={styles.main}>
            {/* 商家入驻模块 */}
            <div className={styles.panel}>
                <div className="logo">
                    <img width="150px" src={logo} alt="" />
                </div>
                <div className={styles.form}>
                    <Form name="normal_login" className="login-form" onFinish={onFinish} >
                        <Form.Item name="type" label="商铺类型" rules={[{ required: true, message: '商铺类型不能为空！', }]}>
                            <Radio.Group>
                                <Radio value={0}>充电站</Radio>
                                <Radio value={1}>商铺</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name="shopName" label="商铺名称" rules={[
                            // { required: true, message: '商铺名不能为空', },
                            { validator: shopNameLimit }]} >
                            <Input />
                        </Form.Item>
                        <Form.Item name="tel" label="联系方式" rules={[
                            // { required: true, message: '请输入联系方式！', },
                            { validator: telLimit }
                        ]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="address" label="店铺地址" rules={[{ required: true, message: '店铺地址不能为空！', },]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="managerName" label="注册人" rules={[{ required: true, message: '注册人不能为空！', },]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="idCard" label="身份证号" rules={[{ required: true, message: '身份证号不能为空！', },]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="idCardUpload" label="身份证照片" rules={[{ required: true, message: '身份证照片不能为空！', },]}
                            valuePropName="fileList"
                            // 如果没有下面这一句会报错
                            getValueFromEvent={normFile1} >
                            <Upload {...idCardprop}>
                                <Button icon={<UploadOutlined />}>点击上传身份证照片</Button>
                            </Upload>
                        </Form.Item>
                        <Form.Item name="licenceNo" label="营业执照编号" rules={[{ required: true, message: '营业执照编号不能为空！', },]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="licenceUpload" label="营业执照照片" rules={[{ required: true, message: '营业执照照片不能为空！', },]}
                            valuePropName="fileList"
                            // 如果没有下面这一句会报错
                            getValueFromEvent={normFile} >
                            <Upload {...licenceProp} >
                                <Button icon={<UploadOutlined />}>点击上传营业执照照片</Button>
                            </Upload>
                        </Form.Item>




                        <Form.Item >
                            <Button type="primary" htmlType="submit" className="login-form-button" size="large" style={{ width: '100%' }}>
                                立即申请
                            </Button>

                        </Form.Item>

                    </Form>

                    <div style={{ textAlign: 'right' }}>
                        <Button type="link">使用已有账户登录</Button>

                    </div>
                </div>
            </div>
        </div>
    )
}
